<template>
  <div class="salePush components-container">
        <el-row :span="24" class="pushMain">
        <el-row class="policyMain">
         <el-col :span="11" class="policyLeft">
          <div class="policyHeader">
          <span  class="policyTitle">可销售品牌型号</span>
            <el-form :inline="true" :model="policySearch" class="policySearchForm">
               <el-col :span="24" >
                <div class="policySearch">
                <el-form-item label="汽车品牌：" class="policySearchText">
                  <el-input size="mini" v-model="policySearch.brandName" :clearable="true"  placeholder="请输入汽车品牌"></el-input>
                </el-form-item>
                <el-form-item class="policySearchBtn">
                  <el-button type="primary" @click="queryPolicy" size="mini" icon="el-icon-search">查询</el-button>
                </el-form-item>
              </div>
              </el-col>
            </el-form>
            </div>
            <el-table
             v-loading="policyLoading"
             class="innerTable"
              ref="multipleTable"
              :data="tablePolicyData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              tooltip-effect="dark"
              style="width: 100%"
              max-height="350"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                >
              </el-table-column>
              <el-table-column
                label="汽车品牌"
                prop="brandName"
                min-width="30%"
               >
              </el-table-column>
              <el-table-column
                prop="modelName"
                label="型号规格"
                min-width="30%"
               >
              </el-table-column>
              <!-- <el-table-column
                prop="number"
                label="库存总数"
                min-width="15%"
                >
              </el-table-column> -->
              <el-table-column
                prop="policyArea"
                label="可售省份"
                min-width="40%"
                >
              </el-table-column>
              
            </el-table>
            <div class="block">
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pagesize"
                layout="total, prev, pager, next"
                :total="policyTotal">
              </el-pagination>
            </div>
          </el-col>
    

      <el-col :span="2" class="inOrOut">
       
            <el-row><el-button @click="addPolicyItem" size="mini" type="primary" icon="el-icon-arrow-right">加入</el-button></el-row>
            <el-row><el-button @click="movePolicyItem" size="mini" icon="el-icon-arrow-left">移除</el-button></el-row>
         
       
      </el-col>

      <el-col :span="11" class="policyRight">
        <div class="policyHeader">
          <span class="policyTitle">已选品牌型号</span>
          </div>
        <el-table
         class="innerTable"
          ref="multipleTable2"
          :data="selectedPolicyData.slice((currentPage2-1)*pagesize2,currentPage2*pagesize2)"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange2">
          <el-table-column
            type="selection"
            >
          </el-table-column>
          <el-table-column
            label="汽车品牌"
            prop="brandName"
            min-width="30%"
           >
          </el-table-column>
          <el-table-column
            prop="modelName"
            label="型号规格"
            min-width="30%"
           >
          </el-table-column>
         <!--  <el-table-column
           prop="number"
           label="库存总数"
           min-width="15%"
           >
         </el-table-column> -->
          <el-table-column
            prop="policyArea"
            label="可售省份"
            min-width="40%"
            >
          </el-table-column>
          
        </el-table>
        <div class="block">
              <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="currentPage2"
              :page-size="pagesize2"
                layout="total, prev, pager, next"
                :total="selectedPolicyTotal">
              </el-pagination>
            </div>
      </el-col>

      </el-row>
      <!-- 分割线 -->
      <div class="push_line"></div>

      <el-row class="agentMain">
         <el-col :span="11" class="agentLeft">
          <div class="agentHeader">
          <span  class="agentTitle">可推送经纪人</span>
            <el-form :inline="true" :model="brokerSearch" class="agentSearchForm">
               <el-col :span="24" >
                <div class="agentSearch">
                <el-form-item label="经纪人姓名：" class="agentSearchText">
                  <el-input size="mini" v-model="brokerSearch.contactName" :clearable="true"  placeholder="请输入经纪人姓名"></el-input>
                </el-form-item>
                <el-form-item class="agentSearchBtn">
                  <el-button type="primary" @click="queryBroker" size="mini" icon="el-icon-search">查询</el-button>
                </el-form-item>
              </div>
              </el-col>
            </el-form>
          </div>
            <el-table
              v-loading="brokerLoading"
              class="innerTable"
              ref="multipleTable3"
              :data="tableBrokerData.slice((currentPage3-1)*pagesize3,currentPage3*pagesize3)"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange3">
              <el-table-column
                type="selection"
                >
              </el-table-column>
              <el-table-column
                label="联系人姓名"
                prop="contactName"
                min-width="20%"
               >
              </el-table-column>
              <el-table-column
                prop="saleMode"
                label="销售方式"
                min-width="20%"
               >
              </el-table-column>
              <el-table-column
                prop="brandName"
                label="销售品牌"
                min-width="25%"
                >
              </el-table-column>
              <el-table-column
                prop="saleArea"
                label="销售省份"
                min-width="35%"
                >
              </el-table-column>
              
            </el-table>
            <div class="block">
              <el-pagination
              @size-change="handleSizeChange3"
              @current-change="handleCurrentChange3"
              :current-page="currentPage3"
              :page-size="pagesize3"
                layout="total, prev, pager, next"
                :total="brokerTotal">
              </el-pagination>
            </div>
          </el-col>
    

      <el-col :span="2" class="inOrOut">
       
            <el-row><el-button @click="addBrokerItem"  size="mini" type="primary" icon="el-icon-arrow-right">加入</el-button></el-row>
            <el-row><el-button @click="moveBrokerItem" size="mini" icon="el-icon-arrow-left">移除</el-button></el-row>
         
       
      </el-col>

      <el-col :span="11" class="agentRight">
         <div class="agentHeader">
          <span class="agentTitle">已选经纪人</span>
         </div>
        <el-table
         class="innerTable"
          ref="multipleTable4"
          :data="selectedBrokerData.slice((currentPage4-1)*pagesize4,currentPage4*pagesize4)"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange4">
          <el-table-column
            type="selection"
            >
          </el-table-column>
          <el-table-column
            label="联系人姓名"
            prop="contactName"
            min-width="20%"
           >
          </el-table-column>
          <el-table-column
            prop="saleMode"
            label="销售方式"
            min-width="20%"
           >
          </el-table-column>
          <el-table-column
            prop="brandName"
            label="销售品牌"
            min-width="25%"
            >
          </el-table-column>
          <el-table-column
            prop="saleArea"
            label="销售省份"
            min-width="35%"
            >
          </el-table-column>
          
        </el-table>
        <div class="block">
              <el-pagination
              @size-change="handleSizeChange4"
              @current-change="handleCurrentChange4"
              :current-page="currentPage4"
              :page-size="pagesize4"
                layout="total, prev, pager, next"
                :total="selectedBrokerTotal">
              </el-pagination>
            </div>
      </el-col>

      </el-row>
<el-row>
    <span   class="dialog-footer">
          <el-button @click="back">取 消</el-button>
          <el-button type="primary" @click="submitPush">提 交</el-button>
        </span>

</el-row>
    </el-row>
        
      
    
       
  </div>
</template>

<script>
    import { Message } from 'element-ui'
    import pages from '../../components/page/page'
    import * as api from '@/api/system'
    import * as salesApi from '@/api/sales'
    import { mapState } from 'vuex'
    import qs from 'qs'
    export default {
      data() {
        return {
          currentPage: 1, 
          pagesize: 6, 
          policyTotal: 0,
          currentPage2: 1, 
          pagesize2: 6, 
          selectedPolicyTotal: 0,
          currentPage3: 1, 
          pagesize3: 6, 
          brokerTotal: 0,
          currentPage4: 1, 
          pagesize4: 6, 
          selectedBrokerTotal: 0,
          page: {
            index: 1,
            size: 10
          },
          total: 0,
          loading: false,
          policyLoading: false,
          brokerLoading: false,
          modelTitle: '',
          addOrUpdate: 'add',
          pushSearch: {
            brandName: '',
            contactName: ''
          },
          policySearch: {
            brandName: ''
          },
          brokerSearch: {
            contactName: ''
          },
          push: {
            broker_ids: '',
            policy_ids: ''
          },
          brandList: [],
          modelList: [],
          tableData: [],
          tablePolicyData: [],
          selectedPolicyData: [],
          multipleSelection: [],
          multipleSelection2: [],
          tableBrokerData: [],
          selectedBrokerData: [],
          multipleSelection3: [],
          multipleSelection4: []
        }
      },
      created() {
        this.queryPolicy()
        this.queryBroker()
        this.selectedPolicyTotal = 0
        this.selectedPolicyData = []
        this.selectedBrokerTotal = 0
        this.selectedBrokerData = []
        this.addOrUpdate = 'add'
       
      },
      components: {
        pages
      },
      methods: {
        handleSizeChange: function (size) { 
          this.pagesize = size; 
        }, 
        handleCurrentChange: function(currentPage){ 
          this.currentPage = currentPage; 
        },  
        handleSizeChange2: function (size) { 
          this.pagesize2 = size; 
        }, 
        handleCurrentChange2: function(currentPage){ 
          this.currentPage2 = currentPage; 
        },
        handleSizeChange3: function (size) { 
          this.pagesize3 = size; 
        }, 
        handleCurrentChange3: function(currentPage){ 
          this.currentPage3 = currentPage; 
        },
        handleSizeChange4: function (size) { 
          this.pagesize4 = size; 
        }, 
        handleCurrentChange4: function(currentPage){ 
          this.currentPage4 = currentPage; 
        },                                                         
        addPolicyItem() {
          var selections = this.multipleSelection
          if (selections.length === 0) {
            this.$message({
                message: `请先勾选所需添加品牌型号`,
                type: 'error',
                showClose: true
              })
           return
         }
          selections.forEach((item,index) => {
            this.selectedPolicyData.push(item)
          })
          var policyData = this.tablePolicyData
          var policyDataTmp = []
          policyData.forEach((item,index) => {
            if (selections.includes(item)) {
              policyDataTmp = this.tablePolicyData
              delete policyDataTmp[index]
            }
          })
           this.tablePolicyData = policyDataTmp.filter((v) => {
            return v !== undefined
          })
           this.selectedPolicyTotal = this.selectedPolicyData.length
           this.currentPage = 1
           this.policyTotal = this.tablePolicyData.length
        },
        movePolicyItem() {
          var selections2 = this.multipleSelection2
           if (selections2.length === 0) {
            this.$message({
                message: `请先勾选所需移除品牌型号`,
                type: 'error',
                showClose: true
              })
            return
          }
          selections2.forEach((item) => {
            this.tablePolicyData.push(item)
          })
          var selectedPolicyData = this.selectedPolicyData
          var selectedPolicyDataTmp = []
          selectedPolicyData.forEach((item,index) => {
            if (selections2.includes(item)) {
              selectedPolicyDataTmp = this.selectedPolicyData
              delete selectedPolicyDataTmp[index]
            }
          })
            this.selectedPolicyData = selectedPolicyDataTmp.filter((v) => {
            return v !== undefined
          })
            this.selectedPolicyTotal = this.selectedPolicyData.length
            this.currentPage2 = 1
            this.policyTotal = this.tablePolicyData.length
        },
        addBrokerItem() {
          var selections3 = this.multipleSelection3
          if (selections3.length === 0) {
            this.$message({
                message: `请先勾选所需添加经纪人`,
                type: 'error',
                showClose: true
              })
           return
         }
          selections3.forEach((item,index) => {
            this.selectedBrokerData.push(item)
          })
          var brokerData = this.tableBrokerData
          var brokerDataTmp = []
          brokerData.forEach((item,index) => {
            if (selections3.includes(item)) {
              brokerDataTmp = this.tableBrokerData
              delete brokerDataTmp[index]
            }
          })
           this.tableBrokerData = brokerDataTmp.filter((v) => {
            return v !== undefined
          })
           this.selectedBrokerTotal = this.selectedBrokerData.length
           this.currentPage3 = 1
           this.brokerTotal = this.tableBrokerData.length
        },
        moveBrokerItem() {
          var selections4 = this.multipleSelection4
           if (selections4.length === 0) {
            this.$message({
                message: `请先勾选所需移除经纪人`,
                type: 'error',
                showClose: true
              })
            return
          }
          selections4.forEach((item) => {
            this.tableBrokerData.push(item)
          })
          var selectedBrokerData = this.selectedBrokerData
          var selectedBrokerDataTmp = []
          selectedBrokerData.forEach((item,index) => {
            if (selections4.includes(item)) {
              selectedBrokerDataTmp = this.selectedBrokerData
              delete selectedBrokerDataTmp[index]
            }
          })
            this.selectedBrokerData = selectedBrokerDataTmp.filter((v) => {
            return v !== undefined
          })
            this.selectedBrokerTotal = this.selectedBrokerData.length
            this.currentPage4 = 1
            this.brokerTotal = this.tableBrokerData.length
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
          // console.log(this.multipleSelection)
        },
        handleSelectionChange2(val) {
          this.multipleSelection2 = val;
        },
        handleSelectionChange3(val) {
          this.multipleSelection3 = val;
        },
        handleSelectionChange4(val) {
          this.multipleSelection4 = val;
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`)
        },
        pushDialog(val, index, row) {
          this.queryPolicy()
          this.queryBroker()
          if (val === 'add') {
            this.selectedPolicyTotal = 0
            this.selectedPolicyData = []
            this.selectedBrokerTotal = 0
            this.selectedBrokerData = []
            this.addOrUpdate = 'add'
          }
        },
        // 获取商务政策list
        queryPolicy() {
          this.policyLoading = true
          salesApi.pushPolicyList(this.policySearch).then((res) => {
            if(+res.code === 0) {
              this.tablePolicyData = res.data
              this.policyTotal = this.tablePolicyData.length
             }
             this.policyLoading = false
           }).catch(function(error) {
             this.policyLoading = false  
             console.log(error)  
           })  
        },
        // 获取经纪人list
        queryBroker() {
          this.brokerLoading = true
          salesApi.pushBrokerList(this.brokerSearch).then((res) => {
            if(+res.code === 0) {
              this.tableBrokerData = res.data
              this.brokerTotal = this.tableBrokerData.length
             }
             this.brokerLoading = false
           }).catch(function(error) {
             this.brokerLoading = false  
             console.log(error)  
           })  
        },
        submitPush() {
          if (this.addOrUpdate === 'add') {
            this.addPush()
          }
        },
        _pageChange(val, flag) {
          this.clearArrVal(this.policy)
          var arr = []
          if (flag === 'size') {
            this.page.index = val
            this.queryPush()
          } else {
            arr.push(val)
            this.page.index = 1
            this.page.size = arr[0]
            this.queryPush()
          }
        },
        queryPush() {
          this.loading = true
          var pages = {
            index: this.page.index,
            size: this.page.size
          }
          var data = Object.assign(this.pushSearch, pages)
          salesApi.pushPageList(data).then((res) => {
            if (+res.code === 0) {
              this.tableData = res.data.rows
              this.total = +res.data.total
              this.loading = false
            }
          }).catch(err => {
            console.log(err)
            this.loading = false
          })
        },
        addPush() {
          if (this.selectedBrokerData.length === 0 || this.selectedPolicyData.length === 0) {
            this.$message({
                message: '请先选择品牌型号或经纪人',
                type: 'error',
                showClose: true
              })
            return
          }
          var broker_ids = []
          var policy_ids = []
          this.selectedBrokerData.forEach((item) => {
            broker_ids.push(Number(item.id))
          })
          this.selectedPolicyData.forEach((item) => {
            policy_ids.push(Number(item.policyId))
          })
          let push = { broker_ids: broker_ids, policy_ids: policy_ids }
          salesApi.pushAdd(push).then((res) => {
            if (+res.code === 0) {
              this.$message({
                message: '新增成功',
                type: 'success',
                showClose: true
              })
              this.$router.push({ path: '/salesPush'})
            }
          }).catch(err => {
            this.$message({
              message: '新增失败',
              type: 'error',
              showClose: true
            })
          })
        },
        handleDelete(index, id) {
          this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            salesApi.pushDelete(id).then((res) => {
              if (+res.code === 0) {
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
                this.queryPush()
              }
            })
          })
        },
        back() {
          this.$router.push({ path: '/salesPush'})
        }
      }
    }
  </script>
<style  lang="scss">
  .salePush {
    position: relative;
    padding: 20px;
      .pushMain {
        min-height: 690px;
      }
      .dialog-footer {
        position: absolute;
        top: 40px;
        left: 43%;
        bottom: 20px
      }
      .policyMain {
        position: relative;
        .policyLeft {
          float: left;
          display: inline-block;
        }
        .policyHeader {
          height: 40px;
          .policyTitle {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
          }
          .policySearchForm {
            float: right;
            margin-right: 0px;
            .policySearch {
              height: 40px;
              .policySearchText {
                display: inline-block;

              }
              .policySearchBtn {
                display: inline-block;
                margin-right: 0px !important;
              }
            }
          }
        }
        .inOrOut {
          float: left;
          display: inline-block;
          position: absolute;
          text-align: center;
          line-height: 50px;
          top: 35%;
        }
        .policyRight {
          float: right;
          display: inline-block;
        }
      }
      .push_line{
        height: 30px;
        border-bottom: 1px solid #ddd;
        text-align: center;
      }
      .agentMain {
        position: relative;
        top: 15px;
        .agentLeft {
          float: left;
          display: inline-block;
        }
        .agentHeader {
          height: 40px;
          .agentTitle {
            font-size: 16px;
            font-weight: bold;
            }
          .agentSearchForm {
            float: right;
            .agentSearch {
              height: 40px;
              .agentSearchText {
                display: inline-block;
              }
              .agentSearchBtn {
                display: inline-block;
                margin-right: 0px !important;
              }
            }
          }
        }
        .inOrOut {
          float: left;
          display: inline-block;
          position: absolute;
          text-align: center;
          line-height: 50px;
          top: 35%;
        }
        .agentRight {
          float: right;
          display: inline-block;
        }
      }
    .innerTable {
      .el-table__body-wrapper {
        height: 240px;
        .el-table__row td .cell {
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          &:hover {
          display: block;
          width: 100%;
          overflow-y: auto;
          white-space: normal;
        }
        }
      }
    }
    .pushTable {
      .el-table__body-wrapper {
        height: 630px;
        overflow-x: inherit;
      }
    }
    .modalCheckBox {
        .el-checkbox-group {
          line-height: 18px;
          margin-left: 20px;
          margin-top: -5px;
          .el-checkbox {
            .el-checkbox__label {
              font-size: 12px;
              color: #666;
            }
          }
        }
        .el-checkbox {
          margin-right: 20px;
        }
        .el-checkbox + .el-checkbox {
          margin-left: 0;
        }
      }
    }
  .components-container {
    position: relative;
    height: 89vh;
    overflow: scroll
  }

  .left-container {
    background-color: #F38181;
    height: 100%;
  }

  .right-container {
    background-color: #FCE38A;
    height: 200px;
  }

  .top-container {
    background-color: #FCE38A;
    width: 100%;
    height: 100%;
  }

  .bottom-container {
    width: 100%;
    background-color: #95E1D3;
    height: 100%;
  }
</style>
